page{height:100%;background-color:#F7F7F7;}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.container{
  position: relative;
  z-index: 30;
  height: 100%;
  width:100%;
  .box{
    height: 38.86%;
    width:calc(unit(360,rpx) * 750 / 390);
    position:absolute;
    top:0.5%;
    left:calc((100% - unit(360,rpx) * 750 / 390)/2);
    //background-color: #88ADEF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .line{
      height: 17.1%;
      width: 100%;
      background-color: white;
      position:relative;
      border-radius: calc(unit(8,rpx) * 750 / 390);;
      text{
        font-size:calc(unit(18,rpx) * 750 / 390);
        position: absolute;
        left: calc(unit(32,rpx) * 750 / 390);
        top:calc((100% - unit(21,rpx) * 750 / 390)/2);
      }
      .rightBox{
        position: absolute;
        height: 42.56%;
        width: calc(unit(220,rpx) * 750 / 390);
        top:calc((100% - unit(24,rpx) * 750 / 390)/2);
        position:absolute;
        right: calc(unit(16,rpx) * 750 / 390);
        font-size:calc(unit(18,rpx) * 750 / 390);
        color: #979797;
        view{
          position: absolute;
          right: calc(unit(32,rpx) * 750 / 390);
        }
        input{
          position: absolute;
          right: calc(unit(32,rpx) * 750 / 390);
          text-align: right;
        }
        image{
          height: 4.7vh;
          width:4.7vh;

          position: absolute;
          right: 0;
          top:calc((100% - unit(32,rpx) * 750 / 390)/2);
          transform:rotate(180deg);
        }
        .userIcon{
          height:100%;
          width: calc(unit(40,rpx) * 750 / 390);

          position: absolute;
          left: 0;
          top:0;
          transform:rotate(0);
          border-radius: 50%;
          overflow: hidden;
        }
      }
    }
  }
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
}
.iconSelect{
  position: fixed;
  height: calc(unit(374,rpx) * 750 / 390);
  width: calc(unit(300,rpx) * 750 / 390);
  top:27.8%;
  left:calc((100% - unit(300,rpx) * 750 / 390)/2);
  background-color: white;
  z-index: 100;
  text-align: center;
  font-size:calc(unit(24,rpx) * 750 / 390);
  border-radius: calc(unit(8,rpx) * 750 / 390);
  .title{
    height:calc(unit(36,rpx) * 750 / 390);
    margin-top: calc(unit(20,rpx) * 750 / 390);
    font-weight: bold;
    font-size:calc(unit(28,rpx) * 750 / 390);
    //line-height:calc(unit(20,rpx) * 750 / 390);
  }
  .iconShow{
    position: relative;
    margin-top: calc(unit(16,rpx) * 750 / 390);
    width: calc(unit(260,rpx) * 750 / 390);
    height: calc(unit(250,rpx) * 750 / 390);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    overflow: auto;
    .iconImg{
      height: calc(unit(80,rpx) * 750 / 390);;
      width: calc(unit(80,rpx) * 750 / 390);
      margin-right: calc(unit(10,rpx) * 750 / 390);
      margin-bottom: 2%;
      border-radius: 50%;
      image{
        width:100%;
        height:100%;
      }
    }
    .clicked{
      border-radius: 50%;
      border:4px solid black;
      box-sizing: border-box;
      height: calc(unit(80,rpx) * 750 / 390);;
      width: calc(unit(80,rpx) * 750 / 390);
      margin-right: calc(unit(10,rpx) * 750 / 390);
      margin-bottom: 2%;
      border-radius: 50%;
      image{
        //margin-left: 10px;
        width: 100%;
        height: 100%;
        transform:translateX(0.5px)translateY(0.5px);
      }
    }
    .iconImg:nth-child(3n) {
      margin: 0;
    }
  }
  .iconBtn{
    position: absolute;
    bottom: 0;
    height: 14%;
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: right;
    color:#115BDE;
    view{
      position: absolute;
      right: 5%;
      top:25%;
    }
  }
}
.addressSelect{
  position: fixed;
  height:calc(unit(388,rpx) * 750 / 390);
  width: calc(unit(300,rpx) * 750 / 390);
  top:27%;
  left:calc((100% - unit(300,rpx) * 750 / 390)/2);
  background-color: white;
  z-index: 100;
  text-align: center;
  font-size:calc(unit(24,rpx) * 750 / 390);
  border-radius:calc(unit(8,rpx) * 750 / 390);
  .title{
    margin-top:calc(unit(20,rpx) * 750 / 390);
    font-size:calc(unit(28,rpx) * 750 / 390);
    font-weight: bold;
  }
  .addressShow{
    //background-color: lightcoral;
    position: relative;
    margin-top:calc(unit(16,rpx) * 750 / 390); ;
    width:calc(unit(260,rpx) * 750 / 390);
    left: calc((100% - unit(260,rpx) * 750 / 390)/2);;
    height: calc(unit(296,rpx) * 750 / 390);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size:calc(unit(18,rpx) * 750 / 390);
    .block{
      position: relative;
      width:  100%;
      height: calc(unit(53,rpx) * 750 / 390);
      .message{
        color: #616161;
        margin-top:  calc(unit(16,rpx) * 750 / 390);
        display: flex;
        flex-direction: row;
        //background-color: lightblue;
        input{
          color: black;
          position: absolute;
          left:25%;
          text-align: left;
        }
        radio-group{
          color: black;
          position: absolute;
          left:25%;
          width: 80%;
          label{
            position:absolute;

          }
        }
        picker{
          color: black;
          position: absolute;
          left:25%;
        }
      }
      .line{
        margin-top:calc(unit(16,rpx) * 750 / 390);;
        height: calc(unit(2,rpx) * 750 / 390);
        width: 100%;
        background-color:#979797
      }
    }
  }
  .iconBtn{
    font-size:calc(unit(24,rpx) * 750 / 390);
    position: absolute;
    bottom: 0;
    height:calc(unit(24,rpx) * 750 / 390);
    line-height:calc(unit(24,rpx) * 750 / 390); ;
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: right;
    color: #115BDE;
    view{
      position: absolute;
      right: 0;
      top:25%;
    }
  }
}